<template>
  <div class="app-container">
    <div class="bg_fff mb_12 pl_14">
      <breadcrumb/>
    </div>
    <div class="content-table">
      <div class="form-content">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
          <el-form-item label="菜单名称" prop="keyword">
            <el-input
              v-model="queryParams.keyword"
              placeholder="请输入菜单名称"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-content">
        <div class="table-group">
          <div class="group-right">
            <el-button size="mini" @click="handleAddOrEdit('add')" class="addBtn" v-hasPermi="['menuAdminMgtList:add']">新建</el-button>
          </div>
        </div>
        <div class="table-big">
          <el-table :data="tableDataList"
                    ref="advergroupTable"
                    :max-height="tableHeight"
                    row-key="id"
                    class="tableHightClass"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          >
            <el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
            <el-table-column :label="item.label"  v-for="(item,index) in tableColumns" :prop="item.key" v-if="item.visible" :width="item.width? item.width:``" :min-width="item.minWidth?item.minWidth:``" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-if="item.key=='status_name'">
                  <span class="color-green" v-if="scope.row[item.key]=='启用'"></span>
                  <span class="color-red" v-if="scope.row[item.key]=='暂停'"></span>
                  {{ scope.row[item.key] }}
                </div>
                <div v-else-if="item.key=='menuTypeName'">
                  <el-tag type="success" v-if="scope.row[item.key]=='菜单'|| scope.row[item.key]==`目录`">{{ scope.row[item.key] }}</el-tag>
                  <el-tag  v-else>{{ scope.row[item.key] }}</el-tag>
                </div>
                <div v-else-if="item.key=='icon'"><svg-icon :icon-class="scope.row.icon" style="margin-right:5px" v-if="scope.row.icon"/>{{ scope.row[item.key] }}</div>
                <div v-else style="    display: inline;">{{ scope.row[item.key] }}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width"
                             width="120">
              <template slot-scope="scope">
                <div class="group-btn">
                  <el-tooltip content="修改" placement="top" effect="light" v-hasPermi="['menuAdminMgtList:edit']">
                    <img src="@/assets/images/tableEdit.png" alt="" @click="handleAddOrEdit('edit',scope.row)">
                  </el-tooltip>
                  <el-tooltip content="删除" placement="top" effect="light" v-hasPermi="['menuAdminMgtList:del']">
                    <img src="@/assets/images/tableDel.png" alt="" @click="handleDelete(scope.row)">
                  </el-tooltip>
                </div>

              </template>
            </el-table-column>
          </el-table>
        </div>

      </div>
    </div>
    <addOrEditAdminMenu v-if="addOrEditAdminMenu" :visableIf.sync="addOrEditAdminMenu" :dialogType="dialogType" :id="id" @handleQuery="handleQuery"></addOrEditAdminMenu>
  </div>
</template>
<script>
import { reqMenuAdminList, reqAdminmenuDelById } from '@/api/menuMgt/index'

export default {
  name: 'menuAdminMgtList',
  components: {
    'addOrEditAdminMenu': () => import('./addOrEditAdminMenu')
  },
  data() {
    return {
      // 查询参数
      total: 8,// 表格的总条数
      id: null,//id
      dateRange: [],//创建时间范围
      tableHeight: null,
      addOrEditAdminMenu: false,//显示弹窗
      dialogType: null,//弹窗类型
      queryParams: {
        page: 1,
        num: 10,
        keyword: ''//关键字（广告组名称，id）
      },
      tableColumns: [
        { key: 'menuName', label: `菜单名称`, visible: true, width: 300 },
        { key: 'icon', label: `图标`, visible: true, minWidth: 80 },
        { key: 'menuTypeName', label: `菜单类型`, visible: true, minWidth: 100 },
        { key: 'path', label: `菜单路由`, visible: true, minWidth:200 },
        { key: 'perms', label: `对应的权限`, visible: true, width: 200 },
        { key: 'orderNum', label: `排序`, visible: true, width: 100 },
        { key: 'create_time', label: `创建时间`, visible: true }

      ],
      statusList: [
        { value: 1, label: '启用' },
        { value: 2, label: '暂停' }
      ],//状态集合
      tableDataList: []//表格数据
    }
  },
  created() {
    this.getList();//获取列表
  },
  mounted() {
    this.getTabelHeight()//获取表格的最大高度
    this.getTableContentHeight()//获取整体的高度
    window.onresize = () => {
      return (() => {
        this.getTabelHeight()//获取表格的最大高度
        this.getTableContentHeight()//获取整体的高度
        this.$refs.advergroupTable.doLayout()
      })()
    }
  },
  methods: {
    getTableContentHeight() {
      let topHeight = document.querySelector('.table-content').offsetTop
      let windowsHeight = document.body.clientHeight
      document.querySelector('.table-content').style.height = windowsHeight - topHeight - 20 + 'px'
    },
    getTabelHeight() {
      //获取表格的高度
      let topHeight = document.querySelector('.tableHightClass').offsetTop
      let windowsHeight = document.body.clientHeight
      if (this.total > 10) {
        let paginationContainerHeight = document.querySelector('.pagination-container').clientHeight
        this.tableHeight = windowsHeight - topHeight - 20 - paginationContainerHeight - 40
      } else {
        this.tableHeight = windowsHeight - topHeight - 20
      }
    },
    getName(list) {
      if (list && list.length > 0) {
        list.forEach(item => {
          item.menuTypeName = item.menuType == 'M' ? `目录` : item.menuType == 'C' ? '菜单' : '按钮'
          if (item.children && item.children.length > 0) {
            this.getName(item.children)
          }
        })
      }
    },
    //广告组查询列表
    getList() {
      this.loading = true
      reqMenuAdminList(this.queryParams).then(res => {
          this.tableDataList = this.handleTree(res.data, 'id')
          console.log('列表', this.tableDataList)
          this.getName(this.tableDataList);
          this.loading = false
        }
      )
    },
    handleAddOrEdit(type, row) {
      if (type == 'add') {
        //新建
        this.id = null//id
        this.dialogType = 'add'
      } else if (type == 'edit') {
        //编辑
        this.id = row.id
        this.dialogType = 'edit'
      }
      this.addOrEditAdminMenu = true
    },
    //搜索广告组列表
    handleQuery() {
      this.getList()
    },
    //重置表单
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    //删除广告组的方法
    handleDelete(row) {
      this.$modal.confirm('是否确认删除选中菜单？').then(() => {
        reqAdminmenuDelById(row.id).then(res => {
          this.$modal.msgSuccess('删除成功')
          this.handleQuery()
        })
      }).catch(() => {
        console.log('你取消删除菜单的操作')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  .big-title {
    height: 40px;
    border-bottom: 1px solid #D5D5D5;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0px 24px;
  }

  .form-content {
    padding: 12px;
    background: #fff;
    margin-bottom: 10px;
  }

  /*表格通用代码编写，可用于全局*/
  .table-content {
    background: #fff;
    padding: 0px 15px;

    .table-group {
      display: flex;
      padding: 12px 0px;
      flex-wrap: wrap;

      .group-left {
        width: 200px;
        display: flex;
        flex-wrap: wrap;

        ::v-deep.el-button--primary {
          border: 1px solid #1670F1;
          background: none !important;
          color: #1670F1;
        }
      }

      .group-right {
        flex: 1;
        align-items: center;
        justify-content: flex-end;
        display: flex;

        .suspendBtn {
          background: #FB311E !important;
          border-color: #FB311E;
        }

        .exportBtn, .customStyle {
          border: 1px solid #1670F1;
          background: none !important;
          color: #1670F1;
        }
      }

    }

    /*表格样式*/
    .table-big {
      ::v-deep .el-table {
        .links {
          color: #1670F1;
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }

  }

}

.tableList {
  display: flex;
  border-bottom: 1px solid #eee;
  background: #fff;
  padding: 0px 20px;
  margin: 0;
  height: 54px;
  border-bottom: 10px solid #F8F9FD;
  margin: 16px 0px 0 0px;

  li {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 0px 10px;
    position: relative;
    cursor: pointer;
    height: 44px;
    color: #8E8E8E;
    margin-right: 30px;

    &.active {
      font-weight: bold;
      color: #000;

      &:after {
        height: 2px;
        background: #1670F1;
        content: '';
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 0;

      }
    }
  }
}

.status {
  span {
    position: relative;
    padding-left: 15px;

    &:after {
      position: absolute;
      left: 0px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      content: '';
      top: 50%;
      margin-top: -4.5px;
    }

    &.color-green:after {

      background: #00DD33;


    }

    &.color-red:after {
      background: #D10807;
    }
  }

}
</style>
